<template>
    <Input v-model="model"></Input>
</template>

<!-- Child.vue -->
<script setup>
import { nextTick } from "vue";

// const model = defineModel("title")
const [model, modifiers] = defineModel("title", {
  set(value){
    if (modifiers.hyphen) {
      return value.substr(0, Math.floor((value.length - 1) / 2)) + "-" + value.substr(Math.floor((value.length - 1) / 2))
    }
    return value;
  }
})
function update() {
  model.value++;
  nextTick(() => {
    console.log(modifiers, 'modifiers');
    console.log(model.value);
  })
}
</script>

<!--<script>-->
<!--import { defineModel } from "vue";-->

<!--export default {-->
<!--  setup() {-->
<!--    const model = defineModel();-->

<!--    function update() {-->
<!--      model.value++;-->
<!--    }-->

<!--    return {-->
<!--      model,-->
<!--      update-->
<!--    };-->
<!--  }-->
<!--};-->
<!--</script>-->

